<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { usePageStore } from "@/store/modules/usePageStore.js";
import { mainList } from "@/constants/mainList";
import LogoImage from "@/assets/images/app_logo.png";

const router = useRouter();
const pageInfoStore = usePageStore();

const errorHandler = () => true;

let isCollapse = ref(pageInfoStore.mainFold);
pageInfoStore.$subscribe((mutation, state) => {
  isCollapse.value = state.mainFold;
});

// 菜单表
let mainName = ref([]);
const mainIndex = ref(pageInfoStore.mainId);

const MainList = ref(mainList);

// 切换菜单
const switchMain = (id) => {
  //console.log(id);
  let newUrl = "";
  mainName.value = [];
  if (id.includes("-")) {
    const cid = Array.from(id);
    // 切换一级菜单
    const obj = {
      lv: 1
    };
    obj.Name = MainList.value[cid[0] - 1].name;
    obj.Url = MainList.value[cid[0] - 1].url;
    mainName.value.push(obj);

    //切换二级菜单
    const obj2 = {
      lv: 2
    };
    obj2.Name = MainList.value[cid[0] - 1].children[cid[2] - 1].name;
    obj2.cUrl = MainList.value[cid[0] - 1].children[cid[2] - 1].url;
    newUrl = obj.Url + obj2.cUrl;
    obj2.Url = newUrl;
    mainName.value.push(obj2);
  } else {
    let obj3 = {};
    obj3.Name = MainList.value[id - 1].name;
    obj3.Url = MainList.value[id - 1].url;
    mainName.value.push(obj3);
    newUrl = obj3.Url;
  }
  //console.log(mainName.value);
  pageInfoStore.mainId = id;
  pageInfoStore.mainName = mainName.value;
  router.push({ path: newUrl });
};
switchMain(mainIndex.value);
</script>
<template>
  <div class="leftMenu">
    <div class="logo-box">
      <el-avatar :src="LogoImage" @error="errorHandler">
        <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
      </el-avatar>
      <transition name="el-fade-in-linear">
        <el-text class="mx-1" size="large" v-show="!isCollapse">Himate</el-text>
      </transition>
    </div>
    <el-menu :default-active="mainIndex" :collapse="isCollapse">
      <template v-for="item in MainList" :key="item.id">
        <el-sub-menu v-if="item.children" :index="item.id">
          <template #title>
            <ezIcon :icon="item.icon" />
            <span>{{ item.name }}</span>
          </template>
          <template v-for="ele in item.children" :key="ele.id">
            <el-menu-item :index="ele.id" @click="switchMain(ele.id)">
              <ezIcon :icon="ele.icon" />
              <template #title>
                {{ ele.name }}
              </template>
            </el-menu-item>
          </template>
        </el-sub-menu>
        <el-menu-item :index="item.id" v-else @click="switchMain(item.id)">
          <ezIcon :icon="item.icon" />
          <template #title>
            {{ item.name }}
          </template>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>
<style lang="scss" scoped>
.leftMenu {
  height: 100vh;
  width: auto;
  border-right: 1px solid var(--ez-border-color);

  :deep(.ez-menu) {
    border-right: none;
    :deep(.ez-button) {
      width: auto;
      height: auto;
    }

    .is-active {
      box-sizing: border-box;
      border-right: 2px solid var(--ez-color-primary);
      background: var(--ez-color-primary-light-9);
    }

    .is-opened {
      border: none;
      background: inherit;
    }
  }

  .logo-box {
    height: 56px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

    .ez-avatar {
      width: 36px;
      height: 36px;
    }

    .mx-1 {
      margin-left: 6px;
      font-weight: bold;
    }
  }
}
</style>
